<template>
	<view class="search">
		<view class="search-time" style="display: none;">
			<view class="search-time__item" @tap="showStart = true">
				{{ formatTime(startTime) || '开始时间' }} <text class="iconfont">&#xe6bb;</text>
			</view>
			<view class="search-time__item" @tap="showEnd = true">
				{{ formatTime(endTime) || '结束时间' }} <text class="iconfont">&#xe6bb;</text>
			</view>
		</view>
		<view class="search-input">
			<view class="search-select" v-if="showSelect" @tap="show=true">
				{{label}}
			</view>
			<u-search placeholder="请输入关键词" v-model="keyword" shape="square" @search="search" @custom="search"
				@input="$emit('input',$event)"></u-search>
		</view>
		<u-datetime-picker :show="showStart" v-model="startTime" mode="date" :max-date="maxTime"
			@confirm="confrimStartTime" @close="showStart = false" @cancel="showStart = false"
			closeOnClickOverlay></u-datetime-picker>
		<u-datetime-picker :show="showEnd" v-model="endTime" mode="date" :max-date="maxTime" @confirm="confrimEndTime"
			@close="showEnd = false" @cancel="showEnd = false"></u-datetime-picker>
		<u-picker :show="show" :columns="columns" @confirm="pickerConfirm" @cancel="show=false"></u-picker>
	</view>
</template>

<script>
	import dayjs from "dayjs"
	export default {
		name: "search",
		props: {
			showSelect: false
		},
		data() {
			return {
				keyword: "",
				showStart: false,
				showEnd: false,
				startTime: "",
				endTime: "",
				maxTime: dayjs().valueOf(),
				show: false,
				columns: [
					['订单信息', '配件信息']
				],
				label: '搜索类型'
			}
		},
		methods: {
			pickerConfirm(e) {
				const value = e.indexs[0]
				const label = e.value[0]
				this.label = label
				this.$emit('sendPicker', {
					label,
					value
				})
				this.show = false
			},
			confrimStartTime(e) {
				this.startTime = dayjs(e.value).format("YYYY-MM-DD")
				this.showStart = false

			},
			confrimEndTime(e) {
				this.endTime = dayjs(e.value).format("YYYY-MM-DD")
				this.showEnd = false
			},
			search() {
				console.log('----')
				this.$emit("search", {
					keyword: this.keyword,
					startTime: this.startTime,
					endTime: this.endTime,
				})
			},
			formatTime(v) {
				if (!v) return "";
				return dayjs(v).format("YYYY-MM-DD")
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		background: #fff;
		padding: 20rpx;

		&-time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			&__item {
				height: 60rpx;
				line-height: 58rpx;
				width: 48%;
				border-radius: 5rpx;
				border: 1rpx solid #f5f5f5;
				font-size: 28rpx;
				color: #666;
				text-align: center;
				position: relative;

				.iconfont {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 30rpx;
					color: #666;
				}
			}
		}
	}

	.search-input {
		display: flex;
		align-items: center;
	}
	.search-select{
		font-size: 26rpx;
	}
</style>